<template>
    <a-layout-header class="header">
        <div class="logo" />
        <a-menu v-model:selectedKeys="selectedKeys1" theme="dark" mode="horizontal" :style="{ lineHeight: '64px' }">
            <a-menu-item key="/">
                <router-link to="/">首页</router-link>
            </a-menu-item>

            <a-menu-item :disabled="!user.id" key="/admin/user">
                <router-link v-show="user.id" to="/admin/user">用户管理</router-link>
            </a-menu-item>

            <a-menu-item key="/admin/ebook">
                <router-link to="/admin/ebook">海洋生物样本书籍</router-link>
            </a-menu-item>

            <a-menu-item key="/admin/category">
                <router-link to="/admin/category">样本分类</router-link>
            </a-menu-item>

            <a-menu-item key="/about">
                <router-link to="/about">关于我们</router-link>
            </a-menu-item>

            <a-menu-item :disabled="!user.id" key="user" :style="{ float: 'right' }">
                <span v-show="user.id">你好：{{ user.name }}</span>
            </a-menu-item>

            <a-menu-item :disabled="user.id" key="login" :style="{ float: 'right' }">
                <a v-show="!user.id" @click="showLoginModal">登录</a>
            </a-menu-item>

            <a-menu-item :disabled="!user.id" key="login" :style="{ float: 'right' }">
                <a v-show="user.id" @click="logout">登出</a>
            </a-menu-item>

        </a-menu>

        <a-modal title="登录" v-model:visible="loginModalVisible" :confirm-loading="loginModalLoading" @ok="login">
            <a-form :model="loginUser" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                <a-form-item label="登录名">
                    <a-input v-model:value="loginUser.loginName"></a-input>
                </a-form-item>
                <a-form-item label="密码">
                    <a-input v-model:value="loginUser.password" type="password"></a-input>
                </a-form-item>
            </a-form>
        </a-modal>

    </a-layout-header>
</template>

<script lang="ts" setup>
import store from '@/store';
import { message } from 'ant-design-vue';
import axios from 'axios';
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';


declare let hexMd5: any;
declare let KEY: any;

const user = computed(()=>store.state.user);

//用作登录
const loginUser = ref({
    loginName:"",
    password:""
})

const loginModalLoading = ref(false);
const loginModalVisible = ref(false);
const showLoginModal = () => {
    loginModalVisible.value = true;
}


const login = () => {
    console.log("开始登录")
    loginModalLoading.value = true;
    loginUser.value.password = hexMd5(loginUser.value.password+KEY);
    axios.post("/user/login",loginUser.value).then((resp)=>{
        loginModalLoading.value = false;
        const data = resp.data;
        if(data.success) {
            loginModalVisible.value = false;
            console.log("登录成功返回数据：",data);
            store.commit("setUser", data.content);
            message.success("登录成功");
        } else {
            message.error(data.message);
            loginModalVisible.value = false;
        }
    })

}

const router = useRouter();
function logout() {
  store.commit("setUser", {});
  loginUser.value.password = '';
  router.push("/");
  message.success("登出成功");
}

</script>